<template>
  <div style="padding: 5px 0 30px 0">
    <nut-searchbar v-model="searchValue">
      <template v-slot:leftin>
        <nut-icon size="14" name="search2"></nut-icon>
      </template>
    </nut-searchbar>
    <div v-if="loading" style="text-align: center;padding: 100px 0">
      <nut-icon name="loading" />
      <div>加载中...</div>
    </div>
    <div style="margin: 0 15px" v-if="scoreData.length > 0">
      <nut-row :gutter="10">
        <nut-col :span="8">
          <nut-cell>
            <div style="text-align: center;width: 100%">
              <h1>{{ avgScore }}</h1>
              <div>平均分</div>
            </div>
          </nut-cell>
        </nut-col>
        <nut-col :span="8">
          <nut-cell>
            <div style="text-align: center;width: 100%">
              <h1>{{ avgCredit }}</h1>
              <div>平均学分</div>
            </div>
          </nut-cell>
        </nut-col>
        <nut-col :span="8">
          <nut-cell>
            <div style="text-align: center;width: 100%">
              <h1>{{ avgPoint }}</h1>
              <div>平均绩点</div>
            </div>
          </nut-cell>
        </nut-col>
      </nut-row>

      <nut-cell is-link :title="item.name" :desc="item.score" v-for="item in scores" v-bind:key="item"
                @click="()=>{currentScore = item;showDetail=true;}"></nut-cell>
    </div>

    <nut-popup position="bottom" closeable v-model:visible="showDetail">
      <div v-if="currentScore" style="padding: 20px" id="popup-box">
        <h3 style="margin-top: 0">{{ currentScore.name }}</h3>
        <nut-row :gutter="10">
          <nut-col :span="6">
            <div class="score-box">
              <h3 style="margin: 5px">{{ currentScore.score }}</h3>
              <div>成绩</div>
            </div>
          </nut-col>
          <nut-col :span="6">
            <div class="score-box">
              <h3 style="margin: 5px">{{ currentScore.credit }}</h3>
              <div>学分</div>
            </div>
          </nut-col>
          <nut-col :span="6">
            <div class="score-box">
              <h3 style="margin: 5px">{{ currentScore.hours }}</h3>
              <div>学时</div>
            </div>
          </nut-col>
          <nut-col :span="6">
            <div class="score-box">
              <h3 style="margin: 5px">{{ currentScore.point}}</h3>
              <div>绩点</div>
            </div>
          </nut-col>
        </nut-row>
        <br>
        <div>开课学期：{{ currentScore.semester }}</div>
        <div>课程编号：{{ currentScore.code }}</div>
        <div>考核方式：{{ currentScore.assessment_type }}</div>
        <div>考试性质：{{ currentScore.assessment_nature }}</div>
        <div>课程属性：{{ currentScore.course_attribute }}</div>
        <div>课程性质：{{ currentScore.course_nature }}</div>
      </div>
    </nut-popup>


  </div>
</template>

<script>
import global from "@/components/global";

export default {
  name: "score",
  data() {
    return {
      loading: false,
      searchValue: '',
      scoreData: [],
      showDetail: false,
      currentScore: null
    }
  },
  methods: {
    loadData() {
      let that = this
      this.loading = true
      global.http(this, 'api/user/score/', {
        success(r) {
          that.scoreData = r.data.score.map((s, i) => {
            return {...s, key: i}
          })
        },
        complete(){
          that.loading = false
        }
      })
    }
  },
  computed: {
    scores() {
      return this.scoreData.filter(s => new RegExp(this.searchValue).test(s.name))
    },
    avgCredit() {
      return (this.scores.map(s => s.credit).reduce((acc, val) => acc + val, 0) / this.scores.length).toFixed(2)
    },
    avgScore() {
      return (this.scores.map(s => s.score).reduce((acc, val) => acc + val, 0) / this.scores.length).toFixed(2)
    },
    avgPoint() {
      return (this.scores.map(s => s.point).reduce((acc, val) => acc + val, 0) / this.scores.length).toFixed(2)
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>

<style scoped>
#popup-box {
  color: #555555;
}

#popup-box div {
  margin: 5px;
}

.score-box{
  text-align: center;
  width: 100%;
  border-radius: 5px;
  /*box-shadow: 0 0 5px 5px rgba(59, 59, 59, 0.1);*/
  padding: 5px 0;
}
</style>